<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<script type="text/javascript" src="lib/vue-2.6.10.js"></script>
	<body>
		
		<div id="app">
			<h1>{{ title }}</h1>	

			<my-count></my-count>
			<my-count></my-count>
			<my-count></my-count>

			<hr>
			

			<my-count2></my-count2>
			<my-count2></my-count2>
			<my-count2></my-count2>

		</div>
		

		<template id="count">
			<div>
				<h5>当前的数据是：{{ num }}</h5>
				<button @click="add()">点击数据+1</button>
			</div>
		</template>
		<template id="count2">
			<div>
				<h5>当前的数据是：{{ num }}</h5>
				<button @click="add()">点击数据+1</button>
			</div>
		</template>



		<script type="text/javascript">
			const data = {
						num:101
					}	

			Vue.component('my-count',{
				template:'#count',
				data(){
					return data;
				},
				methods:{
					add(){
						this.num = this.num + 1;
					}
				}
			})

			Vue.component('my-count2',{
				template:'#count2',
				data(){
					return {
						num:203
					};
				},
				methods:{
					add(){
						this.num = this.num + 1;
					}
				}
			})

			const vm = new Vue({
				el:"#app",
				data:{
					title:' data',
				},
				methods:{},
				filters:{},
			});

		</script>
	</body>
</html>